<template>
  <div class="w" v-show="initialized">
    <div class="left" :key="refresh">
      <div v-for="i in reply_num" class="reply_all reply_bottom" v-if="!interview_specific_display">
        <div class="to">{{ to_from }}</div>
        <div class="name" @click="jump_to_interview_specific(interviews_reply[i-1].nickname)">
          {{ interviews_reply[i - 1].nickname }}
        </div>
        <p class="reply">{{ interviews_reply[i - 1].reply }}</p>
        <p class="time">{{ interviews_reply[i - 1].time }}</p>
        <div class="reply_back" @click="jump_to_interview_specific(interviews_reply[i-1].nickname)">留言</div>
      </div>

      <div class="reply_all" v-if="interview_specific_display" v-show="interview_load">
        <div class="to">{{ to_from }}</div>
        <div class="name">{{ interviews_specific[0].nickname }}</div>
        <p class="reply">{{ interviews_specific[0].reply }}</p>
        <p class="time">{{ interviews_specific[0].time }}</p>

        <div class="reply_second" v-for="i in reply_specific_num">
          <div class="to">{{ interviews_specific[i].nickname }}</div>
          <p class="reply">{{ interviews_specific[i].reply }}</p>
          <p class="time">{{ interviews_specific[i].time }}</p>
        </div>
        <div class="reply_content">
          <textarea rows="4" v-model="reply_content"></textarea>
          <span @click="reply()">留言</span>
        </div>
        <div class="return" @click="jump_to_interview_all()">返回</div>
      </div>


    </div>

    <div class="right" v-if="!is_interviewer">
      <ul>
        <li v-for="i in interview_num" :title=interviewers[i-1].nickname class="interviewer_list"
            @click="jump_to_interview_specific(interviewers[i-1].nickname)">
          <span class="head_portrait" :style="random_rgb()">{{ portrait_name(interviewers[i - 1].nickname[0]) }}</span>
          <span class="head_message">{{ interviewers[i - 1].mail }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Message } from "element-ui";
import axios from "axios";
import qs from "qs";
import { Loading } from "element-ui";

export default {
  name: "Message_board",
  data() {
    return {
      // 面试官的数量
      interview_num: 2,
      // 面试者（面试官）聊过的 面试官（面试者）数量
      reply_num: 2,
      // 获取所有面试官的 nickname 和 email
      refresh: 1,
      interviewers: [
        {
          nickname: "李子恺",
          mail: "18634936606@163.com"
        },
        {
          nickname: "lzk",
          mail: "1213763128@qq.com"
        }
      ],

      // 所有和登录用户进行的第一条留言
      interviews_reply: [
        {
          nickname: "李子恺",
          time: "2021-06-28 19:28",
          reply: "大家好我是尔东！今天给大家带来《仙剑三》电视剧的音乐复刻！\n" +
            "2009年的夏天我只身一人来到北京求学，这部电视剧陪伴我度过了最孤单无助的时候，剧中的几首歌曲都成了我的挚爱，一直影响着我的创作道路。\n" +
            "7年以后我如愿为《仙剑五》电视剧创作了一首插曲《成全》，正式开启了我的音乐生涯。今天真的很开心和大家分享我最珍藏的回忆，一路走来真的很感谢仙剑系列的陪伴。"
        },
        {
          nickname: "888",
          time: "2021-06-28 19:28",
          reply: "大家好我是尔东！今天给大家带来《仙剑三》电视剧的音乐复刻！\n" +
            "2009年的夏天我只身一人来到北京求学，这部电视剧陪伴我度过了最孤单无助的时候，剧中的几首歌曲都成了我的挚爱，一直影响着我的创作道路。\n" +
            "7年以后我如愿为《仙剑五》电视剧创作了一首插曲《成全》，正式开启了我的音乐生涯。今天真的很开心和大家分享我最珍藏的回忆，一路走来真的很感谢仙剑系列的陪伴。"
        }
      ],

      specific_interview_name: "",
      // 和特定用户留言的条数 不包括第一次留言

      reply_specific_num: 2,
      // 和特定用户留言的具体信息
      interviews_specific: [
        {
          nickname: "",
          time: "",
          reply: "" +
            "" +
            ""
        },
        {
          nickname: "***",
          time: "2021-06-28 20:80",
          reply: "要是你俩演奏的时候能一个扮龙葵一个扮雪见，我开二十个小号给你们点赞投币"
        },
        {
          nickname: "***",
          time: "2021-06-28 20:80",
          reply: "要是你俩演奏的时候能一个扮龙葵一个扮雪见，我开二十个小号给你们点赞投币"
        }
      ],

      interview_specific_display: false,
      is_interviewer: false,
      reply_content: "",
      to_from: "to",
      loadingInstance: null,
      initialized: false,
      interview_load: false
    };
  },
  computed: {
    ...mapGetters(["isLogin"]),
    ...mapGetters(["currentUser"]),
    ...mapGetters(["email"]),
    ...mapGetters(["userImage"]),
    ...mapGetters(["identity"])
  },
  created() {

  },
  mounted() {
    axios({
      method: "post",
      url: "/messageboard/get_interviewers"
    })
      .then(res => {
        //获取数据
        /*/!**!/console.log("dsadsadsasdads");*/
        if (res.data.errcode === 0) {

          let result = res.data.result.map(v => {
            return { nickname: v.username, mail: v.email };
          });
          this.interviewers = result;
          console.log(result);
          this.interview_num = result.length;

        } else {
          Message.error("用户未登录");
        }
        /*
                this.$message({
                  message:res.data,
                  type: 'success'
                });*/
      })
      .catch(function(error) {
        console.log(error);
        Message.error(error);
      });

    axios({
      method: "post",
      url: "/messageboard/get_message"
    })
      .then(res => {
        //获取数据
        console.log(res.data);
        console.log(res.data.is_interviewer);
        if (res.data.errcode === 0) {
          if (res.data.is_interviewer == 1) {
            this.is_interviewer = true;
            this.to_from = "from";
            let result = res.data.result.map(v => {
              return { nickname: v.sender, time: v.time, reply: v.content };
            });
            /*console.log(result);*/
            this.reply_num = res.data.num;
            this.interviews_reply = result;
            /*this.interviews_reply=;*/
            this.initialized = true;
          } else {
            this.is_interviewer = false;
            this.to_from = "to";
            let result = res.data.result.map(v => {
              return { nickname: v.receiver, time: v.time, reply: v.content };
            });
            this.reply_num = res.data.num;
            this.interviews_reply = result;
            this.initialized = true;
          }
        } else if (res.data.errcode === 1) {

          Message.error("用户未登录");
          /*    this.userStatus({
                login:false,
              });*/
          //this.$emit('Login_out');
          ////跳转
        }

      })
      .catch(function(error) {
        Message.error(error);
      });

  },
  methods: {
    portrait_name: function(word) {
      return (word.toUpperCase());
    },

    random_rgb: function() {
      let R = Math.floor(Math.random() * 255);
      let G = Math.floor(Math.random() * 255);
      let B = Math.floor(Math.random() * 255);
      return {
        backgroundColor: "rgb(" + R + "," + G + "," + B + ")"
      };
    },

    // 首先在渲染页面前 判断用户是否为面试官 如果是 将 is_interviewer, to_from 分别置为 true, from 否则为 false, to
    // 之后获取和用户第一次留言的信息 放入 interviews_reply 中 格式如 data 中样例所见 并赋值 reply_num
    // 面试者 还需获取到全部面试官信息 并放入 interviewers 中 格式如 data 中样例所见 并赋值 interview_num

    // 该函数参数为对方姓名
    jump_to_interview_specific: function(name) {
      console.log(name);
      axios({
        method: "post",
        url: "/messageboard/get_reply",
        data:
          qs.stringify(
            {
              other_user: name
            })//TBD:

      })
        .then(res => {
          //获取数据
          console.log(res.data);
          if (res.data.errcode === 0) {
            if(res.data.result.length !== 0)
            {
              if (this.identity == 0) {
                this.reply_specific_num = res.data.num - 1;
                this.interviews_specific = res.data.result.map(v => {
                  return { nickname: v.sender, time: v.time, reply: v.content };
                });
                this.interview_load = true;
              } else {

                this.reply_specific_num = res.data.num - 1;
                this.interviews_specific = res.data.result.map(v => {
                  return { nickname: v.sender, time: v.time, reply: v.content };
                });

                this.interviews_specific[0].nickname = res.data.result[0].receiver;

                this.interview_load = true;

              }
            }
            else {
              this.reply_specific_num = 0;
              this.interview_load = true;
              this.interviews_specific[0].nickname=name;
            }

          } else {
            Message.error("用户未登录");

          }


        })
        .catch(function(error) {
          Message.error(error);
        });
      // 将该姓名传给后端 要求后端返回的所有留言放入 interviews_specific 中 格式如 data 中样例所见 并赋值 reply_specific_num
      this.interview_specific_display = true;
      this.specific_interview_name = name;
      console.log(name);
      this.refresh++;
    },

    // 这个函数应该不用发生变化
    jump_to_interview_all: function() {
      this.interview_specific_display = false;
      this.interview_load = false;
    },

    reply: function() {
      axios({
        method: "post",
        url: "/messageboard/send",
        data:
          qs.stringify(
            {
              msg: this.reply_content,
              receiver: this.interviews_specific[0].nickname
            })//TBD:

      })
        .then(res => {
          //获取数据
          /*console.log(res.data);*/
          if (res.data.errcode === 0) {
            this.jump_to_interview_specific(this.interviews_specific[0].nickname);
/*            this.reply_specific_num += 1;
            this.interviews_specific.push(
              { nickname: res.data.sender, time: res.data.time, reply: res.data.msg }),

              this.interview_load = true;*/
          } else {
            Message.error("用户未登录");

          }


        })
        .catch(function(error) {
          Message.error(error);
        });

      // 首先获取到 reply_content 中的信息 为留言内容 格式为 string
      //  将 specific_interview_name 和 rely_content 返回给后端 添加该条留言

    }
  }
};
</script>

<style scoped>
@import "../../common/stylus/style.css";
@import "../../assets/css/all.css";
@import "../../assets/css/message_board.css";
</style>